<template>
  <div class="container">
    <div class="header">
      <span>- {{departmentname}} -</span>
    </div>
    <div class="wrap">
      <div class="wrap_box">
        <div class="body">
          <div class="grey_arrow" @tap="tocustomerlists()">
            <span>客户</span>
            <span>{{dataview.guestnum}}</span>
          </div>
          <div class="grey_arrow" @tap="touserlists()" v-if="ismanage === '1'">
            <span>员工</span>
            <span>{{dataview.usernum}}</span>
          </div>
          <div v-if="floor === '0' || floor === '1'">
            <span>现金负债</span>
            <span>{{dataview.cashfuzhai}}元</span>
          </div>
          <div v-if="floor === '0' || floor === '1'">
            <span>品项负债</span>
            <span>{{dataview.cardfuzhai}}元</span>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_box">
        <div class="title">
          <div class="switch">
            <span :class="{ active: isActive === 0 }" @tap="switchPeriod(0)">本日</span>
            <span :class="{ active: isActive === 1 }" @tap="switchPeriod(1)">本月</span>
            <span :class="{ active: isActive === 2 }" @tap="switchPeriod(2)">本年</span>
            <span :class="{ active: isActive === 3 }" @tap="switchPeriod(3)">自定义</span>
          </div>
          <div class="custom" v-if="isActive === 3">
            <picker
              mode="date"
              :value="startDate"
              start="2000-01-01"
              :end="toady"
              @change="startDateChange"
            >
              <view class="picker">{{startDate}}</view>
            </picker>
            <span style="padding: 0 6rpx;color: rgba(255, 177, 153, 1);">~</span>
            <picker mode="date" :value="endDate" start="2000-01-01" @change="endDateChange">
              <view class="picker">{{endDate}}</view>
            </picker>
          </div>
        </div>
        <div class="newbody">
          <div>
            <span>{{yj.xj}}元</span>
            <span>现金业绩</span>
          </div>
          <div>
            <span>{{yj.kh}}元</span>
            <span>卡耗业绩</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      user_id: '',
      jsonshop: '',
      floor: '',
      ismanage: '',
      departmentname: '',
      toady: '',
      month: '',
      year: '',
      startDate: '',
      endDate: '',
      dataview: {},
      yj: {},
      isActive: 0
    }
  },
  components: {
    Empty
  },
  async onLoad () {
    const that = this
    that.user_id = that.$route.query.user_id
    that.jsonshop = that.$route.query.jsonshop
    that.floor = that.$route.query.floor
    that.ismanage = that.$route.query.ismanage
    that.departmentname = that.$route.query.departmentname
    await Promise.all([
      that.gettoday(),
      that.getshopdata(),
      that.getshopyejidata()
    ])
  },
  methods: {
    async gettoday () {
      const that = this
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      const time = [year, month, day].map(n => {
        n = n.toString()
        return n[1] ? n : '0' + n
      })
      const toady = time.join('-')
      that.year = time[0]
      that.month = time[1]
      that.toady = toady
      that.startDate = toady
      that.endDate = toady
    },
    async getshopdata () {
      const that = this
      let cashfuzhai = 0
      let cardfuzhai = 0
      const res = await api.getshopdata({
        jsonshop: that.jsonshop,
        floor: that.floor,
        ismanage: that.ismanage,
        user_id: that.user_id
      })
      res.guestnum = res.guest.length
      if (that.ismanage === '1') {
        res.usernum = res.user.length
      }
      if (that.floor === '0' || that.floor === '1') {
        res.guest.forEach(e => {
          cashfuzhai += e.balance
          cardfuzhai += e.cardfuzhai
        })
        res.cashfuzhai = cashfuzhai.toFixed(2)
        res.cardfuzhai = cardfuzhai.toFixed(2)
      }
      that.dataview = res
      wx.setStorageSync('user', res.user)
      wx.setStorageSync('guest', res.guest)
    },
    async getshopyejidata () {
      const that = this
      const startTimejs = moment(that.startDate).unix()
      const endTimejs = moment(that.endDate).unix() + 86400
      const res = await api.getshopyejidata({
        jsonshop: that.jsonshop,
        floor: that.floor,
        ismanage: that.ismanage,
        user_id: that.user_id,
        startTime: startTimejs,
        endTime: endTimejs
      })
      res.xj = res.xj.toFixed(2)
      res.kh = res.kh.toFixed(2)
      that.yj = res
    },
    switchPeriod (index) {
      const that = this
      switch (index) {
        case 0:
          that.setDates(that.toady, that.toady)
          that.isActive = 0
          break;
        case 1:
          const days = new Date(that.year, that.month, 0).getDate() // 获取的当月天数
          const start = that.year + '-' + that.month + '-01'
          const end = that.year + '-' + that.month + '-' + days
          that.setDates(start, end)
          that.isActive = 1
          break;
        case 2:
          that.setDates(that.year + '-01-01', that.year + '-12-31')
          that.isActive = 2
          break;
        default:
          that.isActive = 3
          break;
      }
    },
    setDates (start, end) {
      const that = this
      that.startDate = start
      that.endDate = end
      that.getshopyejidata()
    },
    startDateChange (e) {
      const that = this
      const startDate = e.mp.detail.value
      const startTimejs = moment(startDate).unix()
      const endTimejs = moment(that.endDate).unix()
      if (startTimejs > endTimejs) {
        Toast('开始日期大于结束日期', 'noicon')
        return false
      }
      that.startDate = startDate
      that.getshopyejidata()
    },
    endDateChange (e) {
      const that = this
      const endDate = e.mp.detail.value
      const startTimejs = moment(that.startDate).unix()
      const endTimejs = moment(endDate).unix()
      if (startTimejs > endTimejs) {
        Toast('开始日期大于结束日期', 'noicon')
        return false
      }
      that.endDate = endDate
      that.getshopyejidata()
    },
    tocustomerlists () {
      this.$router.push({ path: '/pages/dataview/guestlist/guestlist' })
    },
    touserlists () {
      this.$router.push({ path: '/pages/dataview/userlist/userlist' })
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-weight: bold;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
.switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 602rpx;
  height: 48rpx;
  background-color: rgba(255, 177, 153, 0.3);
  border-radius: 40rpx;
  margin: 16rpx 0;
  font-size: 28rpx;
}
.switch > span {
  width: 102rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: rgba(255, 177, 153, 1);
}
.switch > span.active {
  background-color: #fff;
}
.bottom_arrow {
  width: 26rpx;
  height: 16rpx;
  background: url(http://mytimg.178mr.com/arrow_black.png) no-repeat;
  background-size: 100%;
}
.wrap_box {
  width: 688rpx;
  box-shadow: 0 6rpx 20rpx rgba(255, 68, 68, 0.1);
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 16rpx;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
.wrap_box .title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrap .body {
  padding-left: 32rpx;
}
.wrap .body > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.wrap .body > div.grey_arrow {
  position: relative;
  background: url(http://mytimg.178mr.com/grey_arrow.png) 630rpx center/12rpx
    28rpx no-repeat;
}
.wrap .body > div:last-child {
  border-bottom: none;
}
.wrap .body > div span:last-child {
  padding-right: 44rpx;
}
.custom {
  display: flex;
}
.picker {
  border: 2rpx solid rgba(255, 229, 222, 1);
  border-radius: 8rpx;
  font-size: 24rpx;
  color: rgba(255, 177, 153, 1);
  line-height: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rpx;
}
.newbody {
  display: flex;
  height: 180rpx;
}
.newbody > div {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.newbody > div span:first-child {
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
.newbody > div span:last-child {
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
}
</style>

